<template>
  <div class="setting">
    <Modal
      width="500"
      height="550"
      cancel-text
      v-model="modalShow"
      title="修改密码">
      <p slot="header" style="font-size: 16px;color:#48aafa;text-align:center">
        <span>修改密码</span>
      </p>
      <div style="text-align:center">
        <Form ref="pswdForm" :label-width="115" :model="pswdForm" :rules="pswdFormRule">
          <Form-item label="旧密码" prop="password">
            <Input v-model="pswdForm.password" type="password" name="password" placeholder="请输入旧密码"/>
          </Form-item>
          <Form-item label="新密码" prop="newPassword">
            <Input v-model="pswdForm.newPassword" type="password" name="newPassword" placeholder="请输入新密码"/>
          </Form-item>
          <Form-item label="再次输入新密码" prop="rePassword">
            <Input v-model="pswdForm.rePassword" type="password" name="rePassword" placeholder="请再次输入新密码"/>
          </Form-item>
        </Form>
      </div>
      <div slot="footer">
        <Row :gutter="16">
          <Col span="12">
          <Button long size="large" @click="handleReset('pswdForm')">重置</Button>
          </Col>
          <Col span="12">
          <Button long type="primary" size="large" @click="handleSubmit('pswdForm')">确认</Button>
          </Col>
        </Row>
      </div>
    </Modal>
    <Tabs>
      <TabPane label="设置">
        <Form :label-width="150">
          <Form-item label="用户邮箱/手机号">
            <Input v-model="mobile" disabled style="width: 200px;"/>
          </Form-item>
          <Form-item label="修改密码">
            <Button type="primary" @click="showModal">点击修改</Button>
          </Form-item>
        </Form>
      </TabPane>
    </Tabs>
  </div>
</template>

<script type="text/ecmascript-6">
  import storage from '@/utils/helpers/storageLite'
  import Model from '@/models/apps'

  export default{
    name: 'setting',
    data () {
      const validatePassCheck = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.pswdForm.newPassword) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        mobile: '',
        modalShow: false,
        pswdForm: {
          password: '',
          newPassword: '',
          rePassword: ''
        },
        pswdFormRule: {
          password: [
            {required: true, message: '旧密码不能为空', trigger: 'blur'}
          ],
          newPassword: [
            {required: true, message: '新密码不能为空', trigger: 'blur'}
          ],
          rePassword: [
            {required: true, message: '请再次填入新密码', trigger: 'blur'},
            {validator: validatePassCheck, trigger: 'blur'}
          ]
        }
      }
    },
    created (){
      this.mobile = storage.get('mobile')
    },
    methods: {
      showModal () {
        this.modalShow = true
      },
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            new Model('userInfo')
              .PUT({
                params: {
                  userNo: storage.get('userNo'),
                  password: this.pswdForm.password,
                  rePassword: this.pswdForm.rePassword
                }
              })
              .then((res) => {
                if (res.data.errorCode === '200') {
                  this.modalShow = false
                  this.$Message.success('操作成功!')
                } else {
                  this.$Message.error('密码重置失败，旧密码输入不正确!')
                }
              })
          }
        })
      },
      handleReset (name) {
        this.$refs[name].resetFields()
      }
    }
  }
</script>

<style>
  .setting {
    width: 1000px;
    margin: 40px auto;
  }
</style>
